<!DOCTYPE html>
<html ng-app="examples">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>example</title>

    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../dist/angular-popups.js"></script>

    <script>
    angular.module('examples', ['angular-popups']);
    </script>

    <link rel="stylesheet" href="./css/show-source-code.css">


    <style>
        #follow-elem {
            width: 120px;
            height: 120px;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            top: 38%;
            margin-top: -40px;
            z-index: 3;
            background: #e3f5ff;
            border:1px solid #abd3ea;
            border-radius: 6px;
        }
        #follow-elem input {
            width: 14px;
            height: 14px;
            position: absolute;
            cursor: pointer;
        }
        #follow-elem .nw {
            left: 14px;
            top: 0;
        }
        #follow-elem .n {
            left: 50%;
            margin-left: -7px;
            top: 0;
        }
        #follow-elem .ne {
            right: 14px;
            top: 0;
        }
        #follow-elem .en {
            right: 0;
            top: 14px;
        }
        #follow-elem .e {
            right: 0;
            top: 50%;
            margin-top: -7px;
        }
        #follow-elem .es {
            right: 0;
            bottom: 14px;
        }
        #follow-elem .se {
            right: 14px;
            bottom: 0;
        }
        #follow-elem .s {
            left: 50%;
            margin-left: -7px;
            bottom: 0;
        }
        #follow-elem .sw {
            left: 14px;
            bottom: 0;
        }
        #follow-elem .ws {
            left: 0;
            bottom: 14px;
        }
        #follow-elem .w {
            left: 0;
            top: 50%;
            margin-top: -7px;
        }
        #follow-elem .wn {
            left: 0;
            top: 14px;
        }
    </style>
</head>
<body>
<div id="follow-elem">
    <input ng-click="nw={open:true}" name="btn" type="radio" class="nw" title="top left">
    <input ng-click="n={open:true}" name="btn" type="radio" class="n" title="top">
    <input ng-click="ne={open:true}" name="btn" type="radio" class="ne" title="top right">
    <input ng-click="en={open:true}" name="btn" type="radio" class="en" title="right top">
    <input ng-click="e={open:true}" name="btn" type="radio" class="e" title="right">
    <input ng-click="es={open:true}" name="btn" type="radio" class="es" title="right bottom">
    <input ng-click="se={open:true}" name="btn" type="radio" class="se" title="bottom right">
    <input ng-click="s={open:true}" name="btn" type="radio" class="s" title="bottom">
    <input ng-click="sw={open:true}" name="btn" type="radio" class="sw" title="bottom left">
    <input ng-click="ws={open:true}" name="btn" type="radio" class="ws" title="left bottom">
    <input ng-click="w={open:true}" name="btn" type="radio" class="w" title="left">
    <input ng-click="wn={open:true}" name="btn" type="radio" class="wn" title="left top">
</div>

<dialog ng-show="nw.open" for="follow-elem" align="top left" close="nw.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="n.open" for="follow-elem" align="top" close="n.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="ne.open" for="follow-elem" align="top right" close="ne.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="en.open" for="follow-elem" align="right top" close="en.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="e.open" for="follow-elem" align="right" close="e.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="es.open" for="follow-elem" align="right bottom" close="es.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="se.open" for="follow-elem" align="bottom right" close="se.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="s.open" for="follow-elem" align="bottom" close="s.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="sw.open" for="follow-elem" align="bottom left" close="sw.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="ws.open" for="follow-elem" align="left bottom" close="ws.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="w.open" for="follow-elem" align="left" close="w.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>

<dialog ng-show="wn.open" for="follow-elem" align="left top" close="wn.open=false">
    <div dialog-title>消息</div>
    <div dialog-content>hello world</div>
</dialog>
<script id="show-source-code" src="./js/show-source-code.js"></script>
</body>
</html>